<template>
  <div>
    <!-- 分申报方式统计申报人数情况图 -->
    <Echart
      :options="options"
      id="fsbfstjsbrsqkt"
      height="180px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
import { formatterAxisNum } from "@/common/utils";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        console.log(newData, "newDatanewDatanewData");
        this.options = {
          title: {
            text: "",
          },
          legend: {
            data: newData.legend,
            width: "100%",
            itemWidth: 10,
            itemHeight: 8,
            top: "0%",
          },
          tooltip: {
            //过滤掉统计的series
            trigger: "axis",
            backgroundColor: "rgb(41, 103, 186)",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              label: {
                show: true,
                backgroundColor: "#7B7DDC",
              },
              lineStyle: {
                color: "#7B7DDC",
              },
            },
            formatter: function(params) {
              var tipListStr = "";
              // var res = params[0].name + "<br/>";
              for (let i = 0; i < params.length - 1; i++) {
                var _t = `
                  <div style="overflow: hidden; margin-top: 8px;">
                    <span>${params[i].marker}${params[i].seriesName}：</span>
                    <span style="float: right;">${formatterAxisNum(params[i].value)}</span>
                  </div>
                `;
                tipListStr += _t;
              }
              var tipHmtl = `
                <div style="padding:8px; min-width: 200px;">
                  <div>${params[0].name}</div>
                  ${tipListStr}
                </div>
              `;
              return tipHmtl;
            },
            textStyle: {
              // fontSize: 12,
            },
          },
          grid: {
            left: "3%",
            width: "100%",
          },
          xAxis: [
            {
              type: "category",
              data: newData.category,
              axisLabel: {
                fontSize: 11,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              show: false,
              axisLabel: {
                // margin: 2,
                formatter: formatterAxisNum,
              },
            },
          ],
          series: [
            {
              name: "非豁免补税",
              type: "bar",
              barWidth: 35,
              stack: "申报人数",
              data: newData.barData.fhmbs,
              itemStyle: {
                color: '#da8e69'
              }
            },
            {
              name: "豁免补税",
              type: "bar",
              stack: "申报人数",
              barWidth: 35,
              data: newData.barData.hmbs,
              itemStyle: {
                color: '#3ac2b2'
              }
            },
            {
              name: "申报退税",
              type: "bar",
              stack: "申报人数",
              barWidth: 35,
              data: newData.barData.sbts,
              itemStyle: {
                color: '#2674e6'
              }
            },
            {
              name: "不补不退",
              type: "bar",
              stack: "申报人数",
              data: newData.barData.bbbt,
              itemStyle: {
                color: '#00bbe0'
                // {
                //   type: 'linear',
                //   x: 0,
                //   y: 0,
                //   x2: 0,
                //   y2: 1,
                //   colorStops: [{
                //       offset: 0, color: '#00bbe0' // 0% 处的颜色
                //   }, {
                //       offset: 1, color: '#000' // 100% 处的颜色
                //   }],
                //   global: false // 缺省为 false
                // }
              }
            },
            {
              name: "统计",
              type: "bar",
              stack: "申报人数",
              barWidth: 35,
              data: newData.barData.tj, //模拟数据
              barMinHeight: "100%",
              labelLayout: {
                y: "0%",
                height: "100%",
                verticalAlign: "top",
              },
              label: {
                normal: {
                  verticalAlign: "top",
                  offset: [0, -10], //左右，上下
                  show: true,
                  position: "top",
                  // formatter: "{c}",
                  formatter: function(params) {
                    return formatterAxisNum(params.data)
                  },
                  fontSize: 14,
                  fontWeight: "bold",
                  textStyle: { color: "#199ED8" },
                },
              },
              itemStyle: {
                normal: {
                  color: "rgba(128, 128, 128, 0)",
                },
              },
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
